<template>
    <view style="height: 100%">
        <!-- pages/form/form.wxml -->
        <!-- <view class="" :style="'height:' + statusBarHeight + 'px; background-color: #000;'"></view>
        <view class="" style="height: 80rpx"></view> -->
        <!-- 订单页面头部按钮 -->
        <view class="nav-bar" @tap="navbarnums">
            <view :class="barnums == 1 ? 'barblod' : ''" data-id="1" @click="getAllOrders(0)">进行中</view>
            <view :class="barnums == 2 ? 'barblod' : ''" data-id="2" @click="getAllOrders(1)">历史</view>
            <view :class="barnums == 3 ? 'barblod' : ''" data-id="3" @click="getAllOrders(-1)">退单</view>
            <view class="slidebar" :style="'left: ' + (barnums == 1 ? '95rpx' : barnums == 2 ? '363rpx' : '610rpx') + ';'"></view>
        </view>
        <!-- 订单页面 -->
        <!-- <view class="form-container">您还没有订单哦...快去下单吧</view> -->
		<!-- 父传子，将页面信息传给子组件 -->
		<view v-if="this.orderList != null && this.orderList.length != 0 ">
			<OrderInfo :orderList="orderList"></OrderInfo>
		</view>
		<view v-else>
			<NotFound></NotFound>
		</view>
    </view>
</template>

<script>
import OrderInfo from "./components/orderInfo.vue";
import NotFound from "./components/notfound.vue";
import {baseUrl} from "../../utils/request.js";
// pages/form/form.js
export default {
	components:{
		OrderInfo,
		NotFound,
	},
    data() {
        return {
            statusBarHeight: uni.db.statusbarhright,
            //电量栏高度
            barnums: 1,
			// 页面编号
			page: 0,
			// 获取订单列表，若为 null 则显示 notfount 页面
			orderList: null,
        };
    },
	
	mounted() {
		// this.getAllOrders()
		// console.log(this.orderList)
	},
	
	watch: {
		orderList(newList){
			// console.log(newList)
		}
	},
	
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
		
	},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
		this.getAllOrders(0);
	},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        navbarnums(e) {
            // console.log(e.target.dataset.id);
            this.setData({
                barnums: e.target.dataset.id
            });
        },
		
		// pageZero(){
		// 	this.page = 0
		// 	this.getAllOrders()
		// 	// console.log(this.page)
		// },
		
		// pageOne(){
		// 	this.page = 1
		// 	this.getAllOrders()
		// 	// console.log(this.page)
		// },
		
		// pageFu(){
		// 	this.page = -1
		// 	this.getAllOrders()
		// 	// console.log(this.page)
		// },
		
		// 获取所有订单信息
		getAllOrders(orderStatus) {
			console.log("orderStatus")
			uni.request({
			  method:"GET",
		      url: baseUrl + `/mixuebingcheng/test/list`,
			  data:{
				status: orderStatus,
				userId: getApp().globalData.userInfo.id
			  },
		      success: (res) => {
		          // console.log(res);
				  // console.log(orderInfo);
				  this.setData({
				      orderList: res.data.rows
				  });
				  console.log(this.orderList);
		      }
		  });
		},
    }
};
</script>
<style>
/* pages/form/form.wxss */
.nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25rpx 80rpx;
    color: rgb(128, 128, 128);
    position: relative;
}
.barblod {
    font-weight: bold;
}
.slidebar {
    height: 7rpx;
    width: 60rpx;
    background: red;
    border-radius: 50rpx;
    position: absolute;
    bottom: 0;
    left: 610rpx;
    transition: left 0.5s;
    /* 95rpx,363rpx, 610rpx*/
}
/* 订单内容循环 */
.form-container {
    widows: 100%;
    height: calc(100vh - 90rpx - 120rpx);
    background: rgb(243, 243, 243);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #cfcece;
}
</style>
